import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-page3',
  templateUrl: './page3.component.html',
  styleUrls: ['./page3.component.css']
})
export class Page3Component implements OnInit {


  userName: FormControl = new FormControl();

  // 代表一个from表单
  formModel: FormGroup = new FormGroup({

    dateRange: new FormGroup({
      startTime: new FormControl('开始'),
      endTime: new FormControl('结束'),
    }),
    emailArray: new FormArray([
      new FormControl(),
      new FormControl(),
    ])
  });


  // 简化版from表单
  formModel2: FormGroup

  constructor(fb: FormBuilder) {
    // 使用FormBuilder 简化form数据模型
    this.formModel2 = fb.group({
      title: ['', [Validators.required]],
      dateRange: fb.group({
        startTime: ['', [Validators.required,this.validators1], this.validators2],       //检验器 第二个是同步检验器 第三个参数是异步检验器
        endTime: [''],
      }),
    })
  }


  ngOnInit() {
    console.log(this)
  }

  validators1(control: FormControl): any {

    // 如果通过验证返回空
    return control.value ? null : {
      errorMsg: '报错漏'
    }
  }

  // 自定义校验器  （每次修改时候都会调用）
  validators2(control: FormControl): any {

    // 异步检验器
    return Observable.of(false ? null : { errorMsg: '错误' }).delay(3000);
  }

  add() {
    // 拿到表单FormArray的数组 push一个内容
    var emailArray = this.formModel.get('emailArray') as FormArray;         //转型
    emailArray.push(new FormControl());
  }

  onSubmit() {

    // 拿到startTime 是否通过
    let isValid: boolean = this.formModel2.get('dateRange').get('startTime').valid;
    //  拿到错误对象信息
    let errors = this.formModel2.get('dateRange').get('startTime').errors

    // console.log(isValid)
    console.log(errors)
    // this.formModel2.valid 检验整个表单的错误

    
    
  }




}
